<template>
  <el-container class="common-layout">
    <el-header class="header-layout" height="51px">
      <header-layout />
    </el-header>
    <el-container class="layout-warp">
      <el-aside width="200px">
        <layout-side-nav />
      </el-aside>
      <layout-content />
      <notice-drawer />
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import HeaderLayout from './components/LayoutHeader.vue';
import LayoutSideNav from './components/LayoutSideNav.vue';
import LayoutContent from './components/LayoutContent.vue';
import NoticeDrawer from './components/NoticeDrawer.vue';
import { useTabsRouterStore } from '@store';

const route = useRoute()
const { appendTabRouterList } = useTabsRouterStore()

const appendNewRoute = () => {
  const {
    path,
    query,
    meta: { title },
    name,
  } = route;
  appendTabRouterList({ path, query, title: title, name: name as string, isAlive: true, meta: route.meta });
};

onMounted(() => {
  appendNewRoute();
});

watch(
  () => route.path,
  () => {
    appendNewRoute();
    // document.querySelector(`.${prefix}-layout`).scrollTo({ top: 0, behavior: 'smooth' });
  },
);

</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;
  width: 100%;

  .header-layout {
    --el-header-padding: 0;
  }

}

.layout-warp {
  position: relative;
  height: calc(100% - 51px);
}
</style>
